<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'
const router = useRouter()
function onClickLeft() {
    router.back()
}

function confirm1() {
    router.push('/confirm')
}
function confirm2() {
    router.push('/care')
}

function confirm3() {
    router.push('/telecommunication')
}
</script>


<template>
    <div class="box">
        <van-nav-bar title="消息通知" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content">

            <div class="top" @click="confirm1">
                <div class="top2">
                    <span>&nbsp; &nbsp;预约提醒</span>
                    <span class="spa1">未读</span>
                </div>
                <div class="top3">
                    &nbsp; &nbsp; 你有一条餐饮美食预约即将到来，请您提早前往！<br>
                    <br>
                    &nbsp; &nbsp; 时间:2023/6/30
                </div>
            </div>


            <div class="top" @click="confirm2">
                <div class="top2">
                    <span>&nbsp; &nbsp;活动通知</span>
                    <span class="spa1">未读</span>
                </div>
                <div class="top3">
                    &nbsp; &nbsp; “夜光派对”活动将于晚间20:00开放!节假日派对狂欢<br />
                    <br>&nbsp; &nbsp;激情即将开放，地点: 娱乐区A16


                </div>
            </div>
        </div>

        <div class="top" @click="confirm3">
            <div class="top2">
                <span>&nbsp; &nbsp;我的信息</span>
                <span class="spa2">已读</span>
            </div>
            <div class="top3">
                &nbsp; &nbsp; 您有一笔预支付超额未及时处理，请于今天11:30<br />
                <br>&nbsp; &nbsp; 之前往前台进行相关账单办理1


            </div>
        </div>
    </div>
</template>

<style scoped >
.top {
    width: 3.4rem;
    height: 1.3rem;
    margin-left: .18rem;
    border-radius: .2rem;
    background-color: antiquewhite;

    /* margin-bottom: .2rem; */
    padding-right: 0.5rem;
    box-sizing: border-box;
    margin-top: .2rem;

}

.top2 {
    width: 100%;
    height: .5rem;
    line-height: .5rem;
    font-size: .14rem;
    display: flex;
    justify-content: space-between;

}

.top3 {
    font-size: .12rem;
}

.spa1 {
    color: chocolate;
}

.spa2 {
    font-weight: 100;
}
</style>